<!-- HEADER -->
  <header class="navbar clearfix" id="header">
    <div class="container">
        <div class="navbar-brand">
          <!-- COMPANY LOGO -->
          <a href="<?php echo site_url('khao-sat-truc-tuyen');?>">
            <img src="<?php echo base_url('media/member/icon/ksv-logo.png');?>" alt="Khảo sát việt" class="img-responsive" height="30" width="120" />
          </a>
          <!-- /COMPANY LOGO -->
          <!-- PROJECT SWITCHER FOR MOBILE -->
          <div class="visible-xs">
            <a href="#" class="project-switcher-btn switcher btn dropdown-toggle tip-bottom" data-toggle="tooltip" title="Toggle Team View">
              <i class="fa fa-group"></i>
            </a>
          </div>
          <!-- /PROJECT SWITCHER FOR MOBILE -->
          <!-- SIDEBAR COLLAPSE -->
          <div id="sidebar-collapse" class="sidebar-collapse btn tip-bottom" data-toggle="tooltip" title="Chuyển đổi menu trái">
            <i class="fa fa-reorder" data-icon1="fa fa-reorder" data-icon2="fa fa-reorder"></i>
          </div>
          <!-- /SIDEBAR COLLAPSE -->
        </div>
        <!-- NAVBAR LEFT -->
        <ul class="nav navbar-nav pull-left hidden-xs" id="navbar-left">
          <li class="dropdown">
            <a href="#" class="project-switcher-btn dropdown-toggle tip-bottom" data-toggle="tooltip" title="Toggle Team View">
              <i class="fa fa-group"></i>
              <span class="name">Các khảo sát & Biểu mẫu</span>
            </a>
          </li>
          <li>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-cog"></i>
              <span class="name">Danh bạ</span>
            </a>
          </li>
          <li>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-cog"></i>
              <span class="name">Thư viện ảnh & Khảo sát</span>
            </a>
          </li>
        </ul>
        <!-- /NAVBAR LEFT -->
        <!-- BEGIN TOP NAVIGATION MENU -->          
        <ul class="nav navbar-nav pull-right">
          <!-- BEGIN NOTIFICATION DROPDOWN -->  
          <li class="dropdown" id="header-notification">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-bell"></i>
              <span class="badge">7</span>            
            </a>
            <ul class="dropdown-menu notification">
              <li class="dropdown-title">
                <span><i class="fa fa-bell"></i> 7 Notifications</span>
              </li>
              <li>
                <a href="#">
                  <span class="label label-success"><i class="fa fa-user"></i></span>
                  <span class="body">
                    <span class="message">5 users online. </span>
                    <span class="time">
                      <i class="fa fa-clock-o"></i>
                      <span>Just now</span>
                    </span>
                  </span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="label label-primary"><i class="fa fa-comment"></i></span>
                  <span class="body">
                    <span class="message">Martin commented.</span>
                    <span class="time">
                      <i class="fa fa-clock-o"></i>
                      <span>19 mins</span>
                    </span>
                  </span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="label label-warning"><i class="fa fa-lock"></i></span>
                  <span class="body">
                    <span class="message">DW1 server locked.</span>
                    <span class="time">
                      <i class="fa fa-clock-o"></i>
                      <span>32 mins</span>
                    </span>
                  </span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="label label-info"><i class="fa fa-twitter"></i></span>
                  <span class="body">
                    <span class="message">Twitter connected.</span>
                    <span class="time">
                      <i class="fa fa-clock-o"></i>
                      <span>55 mins</span>
                    </span>
                  </span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="label label-danger"><i class="fa fa-heart"></i></span>
                  <span class="body">
                    <span class="message">Jane liked. </span>
                    <span class="time">
                      <i class="fa fa-clock-o"></i>
                      <span>2 hrs</span>
                    </span>
                  </span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="label label-warning"><i class="fa fa-exclamation-triangle"></i></span>
                  <span class="body">
                    <span class="message">Database overload.</span>
                    <span class="time">
                      <i class="fa fa-clock-o"></i>
                      <span>6 hrs</span>
                    </span>
                  </span>
                </a>
              </li>
              <li class="footer">
                <a href="#">See all notifications <i class="fa fa-arrow-circle-right"></i></a>
              </li>
            </ul>
          </li>
          <!-- END NOTIFICATION DROPDOWN -->
          <!-- BEGIN INBOX DROPDOWN -->
          <li class="dropdown" id="header-message">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-envelope"></i>
            <span class="badge">3</span>
            </a>
            <ul class="dropdown-menu inbox">
              <li class="dropdown-title">
                <span><i class="fa fa-envelope-o"></i> 3 Messages</span>
                <span class="compose pull-right tip-right" title="Compose message"><i class="fa fa-pencil-square-o"></i></span>
              </li>
              <li>
                <a href="#">
                  <img src="img/avatars/avatar2.jpg" alt="" />
                  <span class="body">
                    <span class="from">Jane Doe</span>
                    <span class="message">
                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse mole ...
                    </span> 
                    <span class="time">
                      <i class="fa fa-clock-o"></i>
                      <span>Just Now</span>
                    </span>
                  </span>
                   
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="img/avatars/avatar1.jpg" alt="" />
                  <span class="body">
                    <span class="from">Vince Pelt</span>
                    <span class="message">
                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse mole ...
                    </span> 
                    <span class="time">
                      <i class="fa fa-clock-o"></i>
                      <span>15 min ago</span>
                    </span>
                  </span>
                   
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="img/avatars/avatar8.jpg" alt="" />
                  <span class="body">
                    <span class="from">Debby Doe</span>
                    <span class="message">
                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse mole ...
                    </span> 
                    <span class="time">
                      <i class="fa fa-clock-o"></i>
                      <span>2 hours ago</span>
                    </span>
                  </span>
                   
                </a>
              </li>
              <li class="footer">
                <a href="#">See all messages <i class="fa fa-arrow-circle-right"></i></a>
              </li>
            </ul>
          </li>
          <!-- END INBOX DROPDOWN -->
          <!-- BEGIN TODO DROPDOWN -->
          <li class="dropdown" id="header-tasks">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-tasks"></i>
            <span class="badge">3</span>
            </a>
            <ul class="dropdown-menu tasks">
              <li class="dropdown-title">
                <span><i class="fa fa-check"></i> 6 tasks in progress</span>
              </li>
              <li>
                <a href="#">
                  <span class="header clearfix">
                    <span class="pull-left">Software Update</span>
                    <span class="pull-right">60%</span>
                  </span>
                  <div class="progress">
                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                    <span class="sr-only">60% Complete</span>
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="header clearfix">
                    <span class="pull-left">Software Update</span>
                    <span class="pull-right">25%</span>
                  </span>
                  <div class="progress">
                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
                    <span class="sr-only">25% Complete</span>
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="header clearfix">
                    <span class="pull-left">Software Update</span>
                    <span class="pull-right">40%</span>
                  </span>
                  <div class="progress progress-striped">
                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
                    <span class="sr-only">40% Complete</span>
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="header clearfix">
                    <span class="pull-left">Software Update</span>
                    <span class="pull-right">70%</span>
                  </span>
                  <div class="progress progress-striped active">
                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
                    <span class="sr-only">70% Complete</span>
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="header clearfix">
                    <span class="pull-left">Software Update</span>
                    <span class="pull-right">65%</span>
                  </span>
                  <div class="progress">
                    <div class="progress-bar progress-bar-success" style="width: 35%">
                    <span class="sr-only">35% Complete (success)</span>
                    </div>
                    <div class="progress-bar progress-bar-warning" style="width: 20%">
                    <span class="sr-only">20% Complete (warning)</span>
                    </div>
                    <div class="progress-bar progress-bar-danger" style="width: 10%">
                    <span class="sr-only">10% Complete (danger)</span>
                    </div>
                  </div>
                </a>
              </li>
              <li class="footer">
                <a href="#">See all tasks <i class="fa fa-arrow-circle-right"></i></a>
              </li>
            </ul>
          </li>
          <!-- END TODO DROPDOWN -->
          <!-- BEGIN USER LOGIN DROPDOWN -->
          <li class="dropdown user" id="header-user">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <img class="avatar" width="25" height="25" src="<?php echo base_url();?>media/user/user32x32.png" alt="<?php echo $this->session->userdata('username');?>">
              <span class="username" data-toggle="dropdown"><small><?php echo $this->session->userdata('username');?></small></span>
              <i class="fa fa-angle-down"></i>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#"><i class="fa fa-user"></i> My Profile</a></li>
              <li><a href="#"><i class="fa fa-cog"></i> Account Settings</a></li>
              <li><a href="#"><i class="fa fa-eye"></i> Privacy Settings</a></li>
              <li><a href="login.html"><i class="fa fa-power-off"></i> Log Out</a></li>
            </ul>
          </li>
          <!-- END USER LOGIN DROPDOWN -->
        </ul>
        <!-- END TOP NAVIGATION MENU -->
    </div>
    <!-- PROJECT SWITCHER -->
    <div class="container project-switcher" id="project-switcher">
      <div id="scrollbar">
      <div class="handle">
      </div>
      </div>
      <div id="frame">
        <ul class="project-list">
        <li class="current">
          <a href="javascript:void(0);">
          <span class="image">
            <img src="img/avatars/avatar3.jpg" alt="" />
          </span>
          <span class="title">
          You
          </span>
          <div class="progress">
            <div class="progress-bar progress-bar-success" style="width: 35%">
            <span class="sr-only">35% Complete (success)</span>
            </div>
            <div class="progress-bar progress-bar-warning" style="width: 20%">
            <span class="sr-only">20% Complete (warning)</span>
            </div>
            <div class="progress-bar progress-bar-danger" style="width: 10%">
            <span class="sr-only">10% Complete (danger)</span>
            </div>
          </div>
          <span class="status">
            <div class="field">
              <span class="badge badge-green">6</span> completed
              <span class="pull-right fa fa-check"></span>
            </div>
            <div class="field">
              <span class="badge badge-orange">3</span> in-progress
              <span class="pull-right fa fa-adjust"></span>
            </div>
            <div class="field">
              <span class="badge badge-red">1</span> pending
              <span class="pull-right fa fa-list-ul"></span>
            </div>
            </span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0);">
          <span class="image">
            <img src="img/avatars/avatar1.jpg" alt="" />
          </span>
          <span class="title">
          Max Doe
          </span>
          <div class="progress">
            <div class="progress-bar progress-bar-success" style="width: 15%">
            <span class="sr-only">35% Complete (success)</span>
            </div>
            <div class="progress-bar progress-bar-warning" style="width: 40%">
            <span class="sr-only">20% Complete (warning)</span>
            </div>
            <div class="progress-bar progress-bar-danger" style="width: 20%">
            <span class="sr-only">10% Complete (danger)</span>
            </div>
          </div>
          <span class="status">
            <div class="field">
              <span class="badge badge-green">2</span> completed
              <span class="pull-right fa fa-check"></span>
            </div>
            <div class="field">
              <span class="badge badge-orange">8</span> in-progress
              <span class="pull-right fa fa-adjust"></span>
            </div>
            <div class="field">
              <span class="badge badge-red">4</span> pending
              <span class="pull-right fa fa-list-ul"></span>
            </div>
            </span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0);">
          <span class="image">
            <img src="img/avatars/avatar2.jpg" alt="" />
          </span>
          <span class="title">
          Jane Doe
          </span>
          <div class="progress">
            <div class="progress-bar progress-bar-success" style="width: 65%">
            <span class="sr-only">35% Complete (success)</span>
            </div>
            <div class="progress-bar progress-bar-warning" style="width: 10%">
            <span class="sr-only">20% Complete (warning)</span>
            </div>
            <div class="progress-bar progress-bar-danger" style="width: 15%">
            <span class="sr-only">10% Complete (danger)</span>
            </div>
          </div>
          <span class="status">
            <div class="field">
              <span class="badge badge-green">10</span> completed
              <span class="pull-right fa fa-check"></span>
            </div>
            <div class="field">
              <span class="badge badge-orange">3</span> in-progress
              <span class="pull-right fa fa-adjust"></span>
            </div>
            <div class="field">
              <span class="badge badge-red">4</span> pending
              <span class="pull-right fa fa-list-ul"></span>
            </div>
            </span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0);">
          <span class="image">
            <img src="img/avatars/avatar4.jpg" alt="" />
          </span>
          <span class="title">
          Ellie Doe
          </span>
          <div class="progress">
            <div class="progress-bar progress-bar-success" style="width: 5%">
            <span class="sr-only">35% Complete (success)</span>
            </div>
            <div class="progress-bar progress-bar-warning" style="width: 48%">
            <span class="sr-only">20% Complete (warning)</span>
            </div>
            <div class="progress-bar progress-bar-danger" style="width: 27%">
            <span class="sr-only">10% Complete (danger)</span>
            </div>
          </div>
          <span class="status">
            <div class="field">
              <span class="badge badge-green">1</span> completed
              <span class="pull-right fa fa-check"></span>
            </div>
            <div class="field">
              <span class="badge badge-orange">6</span> in-progress
              <span class="pull-right fa fa-adjust"></span>
            </div>
            <div class="field">
              <span class="badge badge-red">2</span> pending
              <span class="pull-right fa fa-list-ul"></span>
            </div>
            </span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0);">
          <span class="image">
            <img src="img/avatars/avatar5.jpg" alt="" />
          </span>
          <span class="title">
          Lisa Doe
          </span>
          <div class="progress">
            <div class="progress-bar progress-bar-success" style="width: 21%">
            <span class="sr-only">35% Complete (success)</span>
            </div>
            <div class="progress-bar progress-bar-warning" style="width: 20%">
            <span class="sr-only">20% Complete (warning)</span>
            </div>
            <div class="progress-bar progress-bar-danger" style="width: 40%">
            <span class="sr-only">10% Complete (danger)</span>
            </div>
          </div>
          <span class="status">
            <div class="field">
              <span class="badge badge-green">4</span> completed
              <span class="pull-right fa fa-check"></span>
            </div>
            <div class="field">
              <span class="badge badge-orange">5</span> in-progress
              <span class="pull-right fa fa-adjust"></span>
            </div>
            <div class="field">
              <span class="badge badge-red">9</span> pending
              <span class="pull-right fa fa-list-ul"></span>
            </div>
            </span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0);">
          <span class="image">
            <img src="img/avatars/avatar6.jpg" alt="" />
          </span>
          <span class="title">
          Kelly Doe
          </span>
          <div class="progress">
            <div class="progress-bar progress-bar-success" style="width: 45%">
            <span class="sr-only">35% Complete (success)</span>
            </div>
            <div class="progress-bar progress-bar-warning" style="width: 21%">
            <span class="sr-only">20% Complete (warning)</span>
            </div>
            <div class="progress-bar progress-bar-danger" style="width: 10%">
            <span class="sr-only">10% Complete (danger)</span>
            </div>
          </div>
          <span class="status">
            <div class="field">
              <span class="badge badge-green">6</span> completed
              <span class="pull-right fa fa-check"></span>
            </div>
            <div class="field">
              <span class="badge badge-orange">3</span> in-progress
              <span class="pull-right fa fa-adjust"></span>
            </div>
            <div class="field">
              <span class="badge badge-red">1</span> pending
              <span class="pull-right fa fa-list-ul"></span>
            </div>
            </span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0);">
          <span class="image">
            <img src="img/avatars/avatar7.jpg" alt="" />
          </span>
          <span class="title">
          Jessy Doe
          </span>
          <div class="progress">
            <div class="progress-bar progress-bar-success" style="width: 7%">
            <span class="sr-only">35% Complete (success)</span>
            </div>
            <div class="progress-bar progress-bar-warning" style="width: 30%">
            <span class="sr-only">20% Complete (warning)</span>
            </div>
            <div class="progress-bar progress-bar-danger" style="width: 10%">
            <span class="sr-only">10% Complete (danger)</span>
            </div>
          </div>
          <span class="status">
            <div class="field">
              <span class="badge badge-green">1</span> completed
              <span class="pull-right fa fa-check"></span>
            </div>
            <div class="field">
              <span class="badge badge-orange">6</span> in-progress
              <span class="pull-right fa fa-adjust"></span>
            </div>
            <div class="field">
              <span class="badge badge-red">2</span> pending
              <span class="pull-right fa fa-list-ul"></span>
            </div>
            </span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0);">
          <span class="image">
            <img src="img/avatars/avatar8.jpg" alt="" />
          </span>
          <span class="title">
          Debby Doe
          </span>
          <div class="progress">
            <div class="progress-bar progress-bar-success" style="width: 70%">
            <span class="sr-only">35% Complete (success)</span>
            </div>
            <div class="progress-bar progress-bar-warning" style="width: 20%">
            <span class="sr-only">20% Complete (warning)</span>
            </div>
            <div class="progress-bar progress-bar-danger" style="width: 5%">
            <span class="sr-only">10% Complete (danger)</span>
            </div>
          </div>
          <span class="status">
            <div class="field">
              <span class="badge badge-green">13</span> completed
              <span class="pull-right fa fa-check"></span>
            </div>
            <div class="field">
              <span class="badge badge-orange">7</span> in-progress
              <span class="pull-right fa fa-adjust"></span>
            </div>
            <div class="field">
              <span class="badge badge-red">1</span> pending
              <span class="pull-right fa fa-list-ul"></span>
            </div>
            </span>
          </a>
        </li>
        </ul>
      </div>
      </div>
    <!-- /PROJECT SWITCHER -->
  </header>
  <!--/HEADER -->
  <!-- MENU SURVEY -->
  <section class="hidden-xs">
      <div id="MyWizard" class="wizard">
        <div class="container">
        <ul class="steps">
          <li><a href="<?php echo site_url('tao-khao-sat');?>"><i class="fa fa-cog"></i> Tạo khảo sát</a><span class="chevron"></span></li>
          <li><a href="<?php echo site_url('tao-cau-hoi-khao-sat');?>"><i class="fa fa-check"></i> Tạo câu hỏi</a><span class="chevron"></span></li>
          <li><a href="<?php echo site_url('xem-truoc-khao-sat/'.$surveyId.'');?>"><i class="fa fa-search"></i> Xem trước</a><span class="chevron"></span></li>


          
          <li><a href="<?php echo site_url('kham-pha-du-lieu');?>"><i class="fa fa-globe"></i> Khám phá dữ liệu</a><span class="chevron"></span></li>
          <li><a href="<?php echo site_url('chia-se');?>"><i class="fa fa-share"></i> Chia sẻ</a><span class="chevron"></span></li>
          <li><a href="<?php echo site_url('bao-cao');?>"><i class="fa fa-signal"></i> Báo cáo</a><span class="chevron"></span></li>
        </ul>
      </div>
    </div>
  </section>
  
  <!-- Menu Custom Theme ============================================================= -->
<?php if(isset($nameClass) && $nameClass = 'review') : ?>

  <section class="hidden-xs">
      <div id="MyWizard" class="wizard">
        <div class="container">
          <ul class="dropdown steps">
              <li><a href="javascript: void(0);"><i class="fa fa-globe"></i>Images</a><span class="chevron"></span>
                <ul class="dropdown-menu dropdownPreview" role="menu" aria-labelledby="dLabel">
                  <li>
                      
                          <div class="wrap-dropdown-top-survey-upload-img">
                          <div class="detail-img" style="display:block">
                            <div class="title-top-theme">Header Image</div>
                            <img src="http://localhost/Theme_Setting/public_skin/images/no-img.png" alt="no-img" />
                            <div class="cb-no-img">
                              <input type="checkbox" name="cbNoImage" id="cbNoImage" />
                              <label for="cbNoImage">No Image</label>
                            </div>
                            <div class="alt-img">
                              <label>Image Alt Text</label>
                              <input type="text" name="txtAltImg" id="txtAltImg" />
                            </div>
                            <div class="link-lib-image">
                              <a href="javascript: void(0)">Go to My File Library..</a>
                            </div>
                            <div class="submit-save-and-upload-img">
                              
                            </div>
                          </div>

                          <div class="upload-img">
                            <div class="title-top-theme">Upload Image</div>
                            <div class="box-image-url">
                              <label>Image URL:</label>
                              <input type="text" name="txtImgUrl" id="txtImgUrl" />
                              <input type="button" name="btSet" id="btSet" value="Set" />
                            </div>
                            <div class="box-image-url">
                              
                            </div>

                            <div class="title-top-theme">From My File Library</div>
                            <ul class="list-img-upload">
                              <li></li>
                            </ul>
                          </div>
                        </div>
                      
                  </li>
                </ul>
              </li>

              <li><a href="javascript: void(0);"><i class="fa fa-cog"></i>Themes</a><span class="chevron"></span>
                <ul class="dropdown-menu dropdownPreview" role="menu" aria-labelledby="dLabel">
                    <li>
                      <div class="wrap-dropdown-top-survey">
                        <div class="title-top-theme">Themes</div>
                        <ul class="list-custom-top-menu" id="allThemeSurvey">
                          <?php foreach($allTheme as $aTheme) : ?>
                            <li>
                              <div class="box-img-theme">
                                <img src="<?php echo $aTheme['picture_theme']; ?>" alt="<?php echo $aTheme['name']; ?>" id_theme="<?php echo $aTheme['id']; ?>" path_theme="<?php echo $aTheme['path_theme']; ?>" />
                              </div>
                              <label><?php echo $aTheme['name']; ?></label>
                            </li>
                          <?php endforeach; ?>
                        </ul>
                    </div>
                    </li>
                </ul>
              </li>

              <li><a href="javascript: void(0);"><i class="fa fa-check"></i>Opdtions</a><span class="chevron"></span>
                <ul class="dropdown-menu dropdownPreview" role="menu" aria-labelledby="dLabel">
                    <li>
                              <div class="wrap-dropdown-top-survey">
                              <div class="title-top-theme">Options</div>
                              <div class="box-box">
                                <div class="base-font">
                                  <label>Base Font:</label>
                                  <div class="slDropdown-font">
                                    <select name="slFontBase" id="slFontBase">
                                      <option value="arial">Arial</option>
                                      <option value="tahoma">Tahoma</option>
                                    </select>
                                    <select name="slStyleFont" id="slStyleFont">
                                      <option value="normal">Normal</option>
                                      <option value="bold">Bold</option>
                                    </select>
                                  </div>
                                </div> <!-- Base Font -->

                                <div class="width-base">
                                  <label>Width:</label>
                                  <div class="slPx-inputWidth">
                                    <input type="text" name="txtWidth" id="txtWidth" />
                                    <select name="slPx" id="slPx">
                                      <option value="px">px (pixels)</option>
                                    </select>
                                    <input type="checkbox" name="cbWidth" id="cbWidth" /> <span><label for="cbWidth">Auto</label></span> <span class="hoicham">?</span>
                                  </div>
                                </div> <!-- Width Base -->

                                <div class="show-base">
                                  <label>Show:</label>
                                  <ul class="show-title-des-button">
                                    <li>
                                      <label>Survey Title:</label> <span><input type="radio" name="rdSurveyTitle" value="T" checked="checked"> On</span><span><input type="radio" name="rdSurveyTitle" value="F"> Off</span>
                                    </li>
                                    <li>
                                      <label>Page Title:</label> <span><input type="radio" name="rdPageTitle" value="T" checked="checked"> On</span><span><input type="radio" name="rdPageTitle" value="F"> Off</span>
                                    </li>
                                    <li>
                                      <label>Page Description:</label> <span><input type="radio" name="rdPageDes" value="T" checked="checked"> On</span><span><input type="radio" name="rdPageDes" value="F"> Off</span>
                                    </li>
                                    <li>
                                      <label>Question Numbers:</label> <span><input type="radio" name="rdQuestionNumbers" value="T" checked="checked"> On</span><span><input type="radio" name="rdQuestionNumbers" value="F"> Off</span>
                                    </li>
                                    <li>
                                      <label>Back Button:</label> <span><input type="radio" name="rdBackButton" value="T" checked="checked"> On</span><span><input type="radio" name="rdBackButton" value="F"> Off</span>
                                    </li>
                                    <li>
                                      <label>Progress Bar:</label> <span><input type="radio" name="rdProgressBar" value="T" checked="checked"> On</span><span><input type="radio" name="rdProgressBar" value="F"> Off</span>
                                    </li>
                                    <li>
                                      <label>Powerd by Survey:</label> <span><input type="radio" name="rdPower" value="T" checked="checked"> On</span><span><input type="radio" name="rdPower" value="F"> Off</span>
                                    </li>
                                  </ul>
                                </div> <!-- End Show Base -->

                                <div class="submit-option">
                                  <input type="button" class="btn btn-success" name="btOptions" id="btOptions" value="Save" />
                                </div>
                              </div>
                            </div>
                    </li>
                </ul>
              </li>

              <li><a href="javascript: void(0);"><i class="fa fa-search"></i>Colors</a><span class="chevron"></span>
                <ul class="dropdown-menu dropdownPreview" role="menu" aria-labelledby="dLabel">
                  <li>
                        <div class="wrap-dropdown-top-survey">
                        <div class="title-top-theme">Theme Colors</div>
                        <div class="box-box wrap-box-color">
                          <div class="box-color">
                            <label>Body Background Color:</label>
                            <div class="box-box-color">
                              <?php if(isset($curentCustomTheme['bg_body']) != NULL) : ?>
                                <input class="colorBody allColor" value="<?php echo $curentCustomTheme['bg_body']; ?>" />
                                <input type="text" name="colorBody" id="colorBody" class="tpr"  value="<?php echo $curentCustomTheme['bg_body']; ?>" disabled />
                              <?php else : ?>
                                <input class="colorBody allColor" value="#000000" />
                                <input type="text" name="colorBody" id="colorBody" class="tpr" value="#000000" disabled />
                              <?php endif; ?>
                            </div>
                          </div> <!-- Box Color -->

                          <div class="box-color">
                            <label>Page Background Color:</label>
                            <div class="box-box-color">
                              <?php if(isset($curentCustomTheme['page_bg_color']) != NULL) : ?>
                                <input class="colorPage allColor" value="<?php echo $curentCustomTheme['page_bg_color']; ?>" />
                                <input type="text" name="colorPage" id="colorPage" class="tpr" value="<?php echo $curentCustomTheme['page_bg_color']; ?>" disabled />
                              <?php else : ?>
                                <input class="colorPage allColor" value="#000000" />
                                <input type="text" name="colorPage" id="colorPage" class="tpr" value="#000000" disabled />
                              <?php endif; ?>
                            </div>
                          </div> <!-- Box Color -->

                          <div class="box-color">
                            <label>Page Title Color:</label>
                            <div class="box-box-color">
                              <?php if(isset($curentCustomTheme['page_title_color']) != NULL) : ?>
                                <input class="colorPageTitle allColor" value="<?php echo $curentCustomTheme['page_title_color']; ?>" />
                                <input type="text" name="colorPageTitle" id="colorPageTitle" class="tpr" value="<?php echo $curentCustomTheme['page_title_color']; ?>" disabled />
                              <?php else : ?>
                                <input class="colorPageTitle allColor" value="#000000" />
                                <input type="text" name="colorPageTitle" id="colorPageTitle" class="tpr" value="#000000" disabled />
                              <?php endif; ?>
                            </div>
                          </div> <!-- Box Color -->

                          <div class="box-color">
                            <label>Page Text Color:</label>
                            <div class="box-box-color">
                              <?php if(isset($curentCustomTheme['page_text_color']) != NULL) : ?>
                                <input class="colorPageText allColor" value="<?php echo $curentCustomTheme['page_text_color']; ?>" />
                                <input type="text" name="colorPageText" id="colorPageText" class="tpr" value="<?php echo $curentCustomTheme['page_text_color']; ?>" disabled />
                              <?php else : ?>
                                <input class="colorPageText allColor" value="#000000" />
                                <input type="text" name="colorPageText" id="colorPageText" class="tpr" value="#000000" disabled />
                              <?php endif; ?>
                            </div>
                          </div> <!-- Box Color -->

                          <div class="box-color">
                            <label>Header Background Color:</label>
                            <div class="box-box-color">
                              <?php if(isset($curentCustomTheme['header_bg_color']) != NULL) : ?>
                                <input class="colorHeader allColor" value="<?php echo $curentCustomTheme['header_bg_color']; ?>" />
                                <input type="text" name="colorHeader" id="colorHeader" class="tpr" value="<?php echo $curentCustomTheme['header_bg_color']; ?>" disabled />
                              <?php else : ?>
                                <input class="colorHeader allColor" value="#000000" />
                                <input type="text" name="colorHeader" id="colorHeader" class="tpr" value="#000000" disabled />
                              <?php endif; ?>
                            </div>
                          </div> <!-- Box Color -->

                          <div class="box-color">
                            <label>Header Text Color:</label>
                            <div class="box-box-color">
                              <?php if(isset($curentCustomTheme['header_text_color']) != NULL) : ?>
                                <input class="colorHeaderText allColor" value="<?php echo $curentCustomTheme['header_text_color']; ?>" />
                                <input type="text" name="colorHeaderText" id="colorHeaderText" class="tpr" value="<?php echo $curentCustomTheme['header_text_color']; ?>" disabled />
                              <?php else : ?>
                                <input class="colorHeaderText allColor" value="#000000" />
                                <input type="text" name="colorHeaderText" id="colorHeaderText" class="tpr" value="#000000" disabled />
                              <?php endif; ?>
                            </div>
                          </div> <!-- Box Color -->

                          <div class="box-color">
                            <label>Question Background Color:</label>
                            <div class="box-box-color">
                              <?php if(isset($curentCustomTheme['question_bg_color']) != NULL) : ?>
                                <input class="colorQuestion allColor" value="<?php echo $curentCustomTheme['question_bg_color'] ?>" />
                                <input type="text" name="colorQuestion" id="colorQuestion" class="tpr" value="<?php echo $curentCustomTheme['question_bg_color'] ?>" disabled />
                              <?php else : ?>
                                <input class="colorQuestion allColor" value="#000000" />
                                <input type="text" name="colorQuestion" id="colorQuestion" class="tpr" value="#000000" disabled />
                              <?php endif; ?>
                            </div>
                          </div> <!-- Box Color -->

                          <div class="box-color">
                            <label>Question Title Color:</label>
                            <div class="box-box-color">
                              <?php if(isset($curentCustomTheme['question_title_color']) != NULL) : ?>
                                <input class="colorQuestionTitle allColor" value="<?php echo $curentCustomTheme['question_title_color']; ?>" />
                                <input type="text" name="colorQuestionTitle" id="colorQuestionTitle" class="tpr" value="<?php echo $curentCustomTheme['question_title_color']; ?>" disabled />
                              <?php else : ?>
                                <input class="colorQuestionTitle allColor" value="#000000" />
                                <input type="text" name="colorQuestionTitle" id="colorQuestionTitle" class="tpr" value="#000000" disabled />
                              <?php endif; ?>
                            </div>
                          </div> <!-- Box Color -->

                          <div class="box-color">
                            <label>Progress Bar Color:</label>
                            <div class="box-box-color">
                              <?php if(isset($curentCustomTheme['progress_bar_color']) != NULL) : ?>
                                <input class="colorProBar allColor" value="<?php echo $curentCustomTheme['progress_bar_color'] ?>" />
                                <input type="text" name="colorProBar" id="colorProBar" class="tpr" value="<?php echo $curentCustomTheme['progress_bar_color'] ?>" disabled />
                              <?php else : ?>
                                <input class="colorProBar allColor" value="#000000" />
                                <input type="text" name="colorProBar" id="colorProBar" class="tpr" value="#000000" disabled />
                              <?php endif; ?>
                            </div>
                          </div> <!-- Box Color -->

                          <div class="submit-option">
                            <input type="button" class="btn btn-success" name="btColors" id="btColors" value="Save" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
          </ul>
      </div>
    </div>
  </section>
  
  <script type="text/javascript">
    $(document).ready(function() {
      dropdownMenuPreview();
    });

    function dropdownMenuPreview() {
      $('#MyWizard .dropdown li').bind('click', function() {
        $('#MyWizard .dropdown li').each(function() {
          if($(this).hasClass('active_menu_preview')) {
            $(this).removeClass('active_menu_preview').find('.dropdown-menu').hide();
          }
        });

        $(this).addClass('active_menu_preview').find('.dropdown-menu').show();
      });
    }
  </script>
  <!-- End Menu Custom Theme ============================================================= -->
  <?php endif; ?>
